<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script charset="utf-8" src="../js/jquery-ui-1.10.4.min.js"></script>
</head>
<body>
    <div id="draggable1" style="background-color: blanchedalmond;width: 100px;height: 100px;"></div>
    <div id="draggable2" style="background-color: rgb(218, 150, 49);width: 100px;height: 100px;"></div>
    <div id="draggable3" style="background-color: rgb(71, 62, 48);width: 100px;height: 100px;"></div>
    <div id="draggable4" style="background-color: rgb(105, 9, 25);width: 100px;height: 100px;"></div>
    <div id="draggable5" style="background-color: rgb(241, 238, 234);width: 100px;height: 100px;"></div>
    
</body>

<script>

$("#draggable1").draggable({ helper: "clone" });
$("#draggable2").draggable({
    //helper: "clone",
    axis:"x",
    cursor: "crosshair"
});
$("#draggable3").draggable({
    //helper: "clone",
    revert: true
});
$("#draggable4").draggable({ helper: "clone" });
$("#draggable5").draggable({ helper: "clone" });
$("#draggable6").draggable({ helper: "clone" });

$("#draggable2").draggable({ helper: '<div>this is the small tips to you !</div>' });
</script>
</html>